<template>
<div class="add-page">

<van-nav-bar
  title="发布房源"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>

<van-form>
<div class="heaerd heaerd-tou"> 房源信息</div>
<van-field
  readonly
  clickable
  name="小区名称"
  label="小区名称"
  placeholder="请输入小区名称"
  input-align="right"
  @click="$router.push('/add/search')"
  is-link
/>
<van-field v-model="rental" label="租  金" placeholder="请输入租金/月" >
<template #extra> <span class="right-continer">￥/月</span> </template>
</van-field>
<van-field v-model="building" label="建筑面积" placeholder="请输入建筑面积" >
<template #extra> <span class="right-continer">m²</span> </template>
</van-field>
<van-field
  readonly
  clickable
  name="户型"
  :value="valueUnit"
  label="户 型"
  placeholder="请选择"
  @click="showPicker = true"
    input-align="right"
  is-link
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columnsUnit"
    @confirm="Unit"
    @cancel="showPicker = false"
  />
</van-popup>
<!--  -->
<van-field
  readonly
  clickable
  name="楼层"
  :value="valuefloor"
  label="选择楼层"
  placeholder="请选择"
  @click="showPickerfloor = true"
   input-align="right"
   is-link
/>
<van-popup v-model="showPickerfloor" position="bottom">
  <van-picker
    show-toolbar
    :columns="columnsfloor"
    @confirm="floor"
    @cancel="showPickerfloor = false"

  />
</van-popup>
<!--  -->
<van-field
  readonly
  clickable
  name="朝向"
  :value="valueaspect"
  label="朝 向"
  placeholder="请选择"
  @click="showPickerspect = true"
    input-align="right"
      is-link
/>
<van-popup v-model="showPickerspect" position="bottom">
  <van-picker
    show-toolbar
    :columns="columnsaspect"
    @confirm="saspect"
    @cancel="showPickerspect = false"
  />
</van-popup>
<!--  -->
<div class="heaerd heaerd-top"> 房屋标题</div>
<van-field
  v-model="message"
  rows="2"
  autosize
  type="textarea"
  placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
  show-word-limit
  :border="false"
/>
<!--  -->
<div class="heaerd heaerd-top"> 房屋图像</div>
<van-field name="uploader">
  <template #input>
    <van-uploader v-model="uploader" />
  </template>
</van-field>
<!--  -->
<div class="heaerd heaerd-top"> 房屋配置</div>
<van-grid :column-num="5">
  <van-grid-item v-for="(value,index) in deployicon" :key="value.text" :text="value.text"  @click="allocation(value.text,index)" ref="ledstyle">
    <template #icon>
      <van-icon :class="`iconfont ${value.icon}`"  />
    </template>
  </van-grid-item>
</van-grid>
<!--  -->
<div class="heaerd heaerd-top"> 房屋描述</div>
<van-field
  v-model="messageDescribe"
  rows="8"
  autosize
  type="textarea"
  placeholder="请输入房屋描述信息"
  show-word-limit
  :border="false"
>

</van-field>
<div class="anniu">
<van-button type="default">取消</van-button>
<van-button type="primary" @click="btnAdd">提交</van-button>
</div>
</van-form>

</div>
</template>

<script>
import { condition, releaseHouses } from '@/api/listItem'
import { Dialog, Toast } from 'vant'
export default {
  data () {
    return {

      // 租金
      rental: '',
      // 建筑面积
      building: '',
      // 户型
      valueUnit: '',
      columnsUnit: [],
      showPicker: false,
      // 楼层
      valuefloor: '',
      columnsfloor: [],
      showPickerfloor: false,
      // 朝向
      valueaspect: '',
      columnsaspect: [],
      showPickerspect: false,
      // 留言
      message: '',
      // 图像
      uploader: [],
      // 房屋配置
      deployicon: [
        {
          text: '衣柜',
          icon: 'icon-yigui'
        },
        {
          text: '洗衣机',
          icon: 'icon-xiyiji'
        },
        {
          text: '空调',
          icon: 'icon-kongtiao'
        },
        {
          text: '天然气',
          icon: 'icon-meiqitianranqi'
        },
        {
          text: '冰箱',
          icon: 'icon-bingxiang'
        },
        {
          text: '暖气',
          icon: 'icon-nuanqi'
        },
        {
          text: '电视',
          icon: 'icon-dianshiji'
        },
        {
          text: '热水器',
          icon: 'icon-haofangtuo400iconfont2reshuiqi'
        },
        {
          text: '宽带',
          icon: 'icon-kuandai'
        },
        {
          text: '沙发',
          icon: 'icon-shafa'
        }
      ],
      // 房屋配置
      configuration: [],
      // 房屋描述
      messageDescribe: ''
      //
    }
  },
  async created () {
    const id = localStorage.getItem('my-haozuke-id')
    const { body } = await condition({ id: id })
    this.columnsUnit = body.roomType.map(item => item.label)
    console.log(body)
    this.columnsfloor = body.floor.map(item => item.label)
    this.columnsaspect = body.oriented.map(item => item.label)
  },
  methods: {
    Unit (value) {
      this.valueUnit = value
      this.showPicker = false
    },
    floor (value) {
      this.valuefloor = value
      this.showPickerfloor = false
    },
    saspect (value) {
      this.valueaspect = value
      this.showPickerspect = false
    },
    allocation (text, index) {
      this.configuration = [...this.configuration, text]
      console.log(this.configuration)
      this.$refs.ledstyle[index].style.color = '#21b97a'
      // console.log(this.$refs.ledstyle[index].style)
    },
    async btnAdd () {
      console.log(this.rental)
      console.log(this.building)
      console.log(this.valueUnit)
      console.log(this.valuefloor)
      console.log(this.valueaspect)
      const jions = this.configuration.join('|')
      console.log(jions)
      console.log(this.messageDescribe)
      console.log(this.uploader)
      const res = await releaseHouses({
        body: {
          tite: this.message,
          description: this.messageDescribe,
          price: this.rental,
          size: this.building,
          supporting: this.configuration.join('|')
        }
      })
      if (res.status === 200) {
        await Dialog.confirm({
          title: '确定提交',
          message: '提交房子'
        }).then(() => {
          Toast.success('提交成功')
          this.$router.push('/')
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.heaerd{
  padding: 15px 15px 9px;
  border-bottom: 1px solid #999;
}
.heaerd-tou {
    color: #21b97a;
    background-color: #fff;
    font-size: 15px;
}
.right-continer{
  color: #999;
}
.heaerd-top{
  margin-top: 20px;
}
::v-deep.anniu{
  display: flex;
  justify-content: space-between;

}
 /deep/.van-button--normal {
   width: 50%;
  }
  // /deep/.led {
  //   color: ;
  // }
</style>
